<template>
  <view class="container">
    <view class="radar">
      <view class="radar_top">
        <image :src="topimg" @click="preview(topimg)" mode="scaleToFill" />
      </view>
      <view class="radar_bot">
        <image :src="botimg" @click="preview(botimg)" mode="scaleToFill" />
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        topimg: '',
        botimg: '',
      }
    },
    onLoad(options) {
      this.getRadarimg()
    },
    methods: {
      getRadarimg() {
        uni.request({
          url: 'http://www.nmc.cn/rest/weather?stationid=54871',
          data: {},
          success: (res) => {
            this.topimg = 'http://image.nmc.cn' + res.data.data.radar.image
          }
        });
        uni.request({
          url: 'http://www.nmc.cn/rest/weather?stationid=54778',
          data: {},
          success: (res) => {
            this.botimg = 'http://image.nmc.cn' + res.data.data.radar.image
          }
        });
      },
      preview(url) {
        uni.previewImage({
          urls: [url], // 需要预览的图片链接列表
        });
      },
    },
  }
</script>

<style lang="scss" scoped>
  .radar {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;

    .radar_top, .radar_bot {
      width: 100%;
      height: 50vh;

      image {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
</style>
